#include("/common/_layout.html")
#@layout()
#define layoutHead()
	<title>栏目列表</title>
#end
#define layoutBody()
	<body>
		<div class="page-content-wrap">
					<div class="layui-form">
						<div class="layui-form-item">
							<button class="layui-btn layui-btn-normal" id="btn_save">保存</button>
						</div>
					</div>
					<div class="layui-form" id="table-list">
						<table class="layui-table" lay-skin="line">
							<colgroup>
								<col class="hidden-xs" width="50" style="display:none">
								<col>
								<col width="30">
								<col>
								<col>
								<col width="100">
							</colgroup>
							<thead>
								<tr>
									<th class="hidden-xs" style="display:none">ID</th>
									<th class="hidden-xs">模块</th>
									<th class="hidden-xs">图标</th>
									<th>栏目名称</th>
									<th><input type="checkbox" name="allChoose" lay-skin="primary" lay-filter="allChoose">&nbsp;&nbsp;&nbsp;&nbsp;是否使用
									</th>
									<th>课程分类</th>
								</tr>
							</thead>
							<tbody id="listTbody">
							</tbody>
						</table>
					</div>
		</div>
		<!-- #[[ -->
		<script id="tplTbody" type="text/html">
			{{#  layui.each(d.listdata, function(index, item){ }}
					<tr id='node-{{ item.cat_id }}' class="parent collapsed">
						<td class="hidden-xs" style="display:none">{{ item.cat_id }}</td>
						<td class="hidden-xs">{{ item.type_name }}</td>
						<td><img src="{{ getArticleCatIconUrl(item.cat_icon) }}" style="width:30px;" ></td>
						<td>{{ d.suffix + item.cat_name }}
						</td>
						<td>
							<input type="checkbox" name="oneChoose" lay-skin="primary" lay-filter="oneChoose" data-id="{{ item.cat_id }}"/>
						</td>
						<td>
							{{# if (item.link_course === 1) { }}
							是
							{{# } }}
							{{# if (item.link_course === 0) { }}
							否
							{{# } }}
						</td>
					</tr>
			{{#  }); }}
		</script>
		<!-- ]]# -->
		<script type="text/javascript">
		var page_init = true;
		layui.use(['layer', 'laypage', 'laytpl', 'form'], function(){
			var laypage = layui.laypage
			,layer = layui.layer
			,laytpl = layui.laytpl
			,form = layui.form();
			
			$('#btn_save').click(function(){
				var iids = "";
				$('input[lay-filter="oneChoose"]').each(function(){
					if ($(this)[0].checked){
						iids += $(this).attr("data-id") + ",";
					}
				});
				sendPost("/api/eduorg/articlecat/save", {
						type_id: getUrlParam('typeid'), 
						ids: iids
					}, function(res){
						//console.log(res);
						layer.alert(res.msg, {
							title: '信息提示.'
						});
				});
			});
			
			// get page data
			function getListData(){
				document.getElementById('listTbody').innerHTML = "";
				var surl = "/api/eduorg/articlecat/getAll?type_id="+ getUrlParam('typeid') + "&state=1";
				sendPost(surl, null, function(res){
					console.log(res);
						if (res.hasOwnProperty("listdata")){
							filterListData(res.listdata, 0, 0);
						}
						if (res.hasOwnProperty("listappcat")){
							for(var i=0;i<res.listappcat.length;i++){
								$("input[data-id="+res.listappcat[i].cat_id+"]").prop("checked", true);
							}
						}
						form.render();
				});
			}
			
			function filterListData(listdata, pid, level){
				//筛选
				var listrows = listdata.filter(function (e) { return e.parent_id == pid; });
				//遍历结果对象
				for (var i = 0; i < listrows.length; i++) {
						var shtml = "";
						if (level>0){
							for(j=0;j<level;j++){
								shtml += '&nbsp;&nbsp;&nbsp;&nbsp;';
							}
							shtml += '├─ ';
						}
						shtml += listrows[i].cat_sort + ". ";
						var row = {app_id: #(login_app_id), listdata: [], suffix: shtml} ;
						row.listdata.push(listrows[i]);
						// 渲染
						renderTable(row);
						// 迭代
						filterListData(listdata, listrows[i].cat_id, level+1);
				}
			}

			// render table
			function renderTable(listData){
				var getTpl = document.getElementById('tplTbody').innerHTML;
				laytpl(getTpl).render(listData, function(html){
					document.getElementById('listTbody').innerHTML += html;
				});
			}
			
			getListData();
			
		});

		
		</script>
	</body>

#end